<template>
  <div class="main">
    <!-- <transition name="fade-transform" mode="out-in"> -->
    <div class="New">
      <div class="NewTop"></div>
      <div class="NewMain">
        <!-- <div class="NewLeft"></div> -->
        <div style="flex: 1;padding: 5px 5px 100px 5px; box-sizing: border-box;width: 100%;">
          <keep-alive>
            <router-view :key="key" />
          </keep-alive>
        </div>
      </div>
    </div>
    <!-- </transition> -->
  </div>
</template>


<script>
export default {
  name: "AppMain",
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },

  }
};
</script>

<style lang="less" scoped>
.New {

  .NewTop {
    width: 100%;
    height: 5px;
    background-color: #eceef2;
  }

  .NewMain {
    display: flex;
    .NewLeft {
      width: 5px;
      min-height: 100vh;
      background-color: #eceef2;
    }
  }
}
</style>
